<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Player Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css"> -->
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="../dist/Mdplayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pearplayer"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="../dist/Mdplayer.min.js"></script>
</head>
<style>
body {
    background: #858585;
}
body #mdplayer{
    max-width: 800px;
    margin: 50px;
}
</style>
<body class="markdown-body">
    <div id="mdplayer"></div>
    <script>
        window.dp1 = new Mdplayer({
            container: document.getElementById('mdplayer'),
            video: {
                url: './21.mp4',
            },
            danmaku: {
                id: '9E2E3368B56CDBB4',
                api: './danmu.json',
                token: 'tokendemo',
                maximum: 3000,
                user: 'DIYgod',
                bottom: '15%',
                unlimited: true,
                callback(results) {
                    console.log("弹幕装填成功");
                },
            },
            apiBackend: {
                read: function (options) {
                    console.log('自定义获取弹幕list接口');
                    axios.get(options.url).
                    then((response) => {
                        const data = response.data;
                        if (!data || data.code !== 0) {
                            options.error && options.error(data && data.msg);
                            return;
                        }
                        options.success && options.success(data.data.map((item) => ({
                            time: item[0],
                            type: item[1],
                            color: item[2],
                            author: item[3],
                            text: item[4]
                        })));
                    }).
                    catch((e) => {
                        console.error(e);
                        options.error && options.error();
                    });
                    // callback();
                },
                send: function (options) {
                    console.log('自定义发送弹幕接口', options.data);
                    // callback();
                }
            },
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/stats.js"></script>
    <script>
        // stats.js: JavaScript Performance Monitor
        const stats = new Stats();
        stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
        document.body.appendChild(stats.dom);

        function animate() {
            stats.begin();
            // monitored code goes here
            stats.end();
            requestAnimationFrame(animate);
        }
        requestAnimationFrame(animate);
    </script>
</body>

</html>